<template>
  <div id="message">
    <!-- 个人信息页面 -->
    <div class="message_item message_item1">
      <div class="message_item_container message_avatar">
        <span class="message_text">头像</span>
        <span class="message_right">
          <img class="message_img" :src="headImgUrl" />
          <img class="next_arrow" src="./assets/ic_next.png" />
        </span>
      </div>
    </div>
    <div class="message_item">
      <div class="message_item_container">
        <span class="message_text">身份证号</span>
        <span class="message_right">
          <span class="message_content">{{idNumber}}</span>
          <img class="next_arrow" src="./assets/ic_next.png" />
        </span>
      </div>
    </div>
    <div class="message_item">
      <div class="message_item_container">
        <span class="message_text">姓名</span>
        <span class="message_right">
        <span class="message_content">{{realName}}</span>
        <img class="next_arrow" src="./assets/ic_next.png" />
        </span>
      </div>
    </div>
    <div class="message_item" @click="showRevise">
     <div class="message_item_container">
        <span class="message_text">手机号码</span>
        <span class="message_right">
          <span class="message_content">{{phoneNumber}}</span>
          <img class="next_arrow" src="./assets/ic_next.png" />
        </span>
     </div>
    </div>
    <UserRevise :panelShow.sync="panelShow" :oldTelephone="phoneNumber"/>
  </div>
</template>
<script>
import '../../css/layout.css'
import '@/utils/rem.js';
import UserRevise from "../../components/revise/revise";
import User from '_common/services/user.js'
import { getCookie } from '@/utils/cookiesUtil.js'
import wxLogin from '_common/wxLogin.js'
export default {
  	name: 'message',
  	data() {
  		return {
        idNumber: '',
        realName: '',
        phoneNumber: '',
        panelShow: false,
        headImgUrl: getCookie('headImgUrl') || require('_images/avatar.jpg'),
  		}
  	},
  	computed: {
  	},
  	methods: {
      showRevise () {
        this.panelShow = true;
      },
      getData() {
        User.getUserInfo().then(res => {
        console.log('res:', res);
        this.idNumber = res.data.idNumber;
        this.realName = res.data.realName;
        this.phoneNumber = res.data.phoneNumber;
      })
      }
    },
    async beforeMount() {
      await wxLogin(this.getData)
    },
    mounted(){
    },
    components: {
      UserRevise,
    }
}  
</script>

<style lang="less" scoped>
@import	"../../css/common";
html {
  height: 100%;
}
#message {
  height: 100%;
  background-color: #f8f8f8;
  .message_item1 {
    margin-bottom: 20px;
  }
  .message_item {
    background-color: #ffffff;
    .message_avatar {
      height: 176px !important;
      border-width: 0 !important;
    }
    .message_item_container {
      height: 88px;
      display: flex;
      margin: 0 32px 0 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 88px;
      border-bottom: .033333rem solid @line-color;
      background-color: #ffffff;
      .message_text {
        font-size: 30px;
        color: #333333;
      }
      .message_right {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        .message_content {
          font-size: 30px;
          color: #666666;
          margin-right: 24px;
        }
        .next_arrow {
          width: 17px;
          height: 29px;
        }
        .message_img {
          width: 120px;
          height: 120px;
          border-radius: 60px; 
          margin-right: 24px;
        }
      }
    }
  }
}
</style>